<template>
  <div class="app-container">
    <div class="box">
  <el-card class="box-card">
  <el-tabs >
    <el-tab-pane label="首页">
      <el-button  style="border: none;" @click="handleAdd" v-hasPermi="['project:baseinfo:add']">
        <div >
          <img src="~@/assets/icons/image/1.png">
          <div >F1开牌</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/2.png">
          <div >F2点单</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/3.png">
          <div >F3对单</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/4.png">
          <div >F4买单</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/5.png">
          <div >分单</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/6.png">
          <div >取并</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/7.png">
          <div >退单</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/8.png">
          <div >F5换牌</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/9.png">
          <div >F6并牌</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/10.png">
          <div >10留牌</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/11.png">
          <div >坏/锁</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/12.png">
          <div >F7修改</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/13.png">
          <div >团体</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/14.png">
          <div >F8统计</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/15.png">
          <div >12浏览</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/16.png">
          <div >F9交班</div>
        </div>
      </el-button>
      <el-button  style="border: none;">
        <div >
          <img src="~@/assets/icons/image/17.png">
          <div >11挂失</div>
        </div>
      </el-button>
    </el-tab-pane>

    <el-tab-pane label="前台收银">配置管理</el-tab-pane>
    <el-tab-pane label="操作">角色管理</el-tab-pane>
    <el-tab-pane label="窗口">定时任务补偿</el-tab-pane>
    <el-tab-pane label="帮助">定时任务补偿</el-tab-pane>
  </el-tabs>
<!--  </el-card>-->
    <el-divider></el-divider>




    <el-row :gutter="10">

      <el-col :span="20">
        <el-button  plain>手牌激活</el-button>
        <el-button  plain>读手牌</el-button>
        <el-button  plain>刷新</el-button>
        <el-button plain>会员查询</el-button>
        <el-button  plain>房间管理</el-button>
        <el-button   plain>开房</el-button>
        <el-button  plain>满房</el-button>
        <el-button   plain>登记身份证</el-button>
        <el-button  plain>团购查询</el-button>
        <el-button  plain>团购验证</el-button>
        <el-button   plain>空闲手牌清单</el-button>
      </el-col>
      <el-col :span="4">
        <el-input style="width:90%;" placeholder="请输入搜索的关键字">

          <el-button type="primary" slot="append" icon="el-icon-search" plain>搜索</el-button>

        </el-input>
      </el-col>

<!--     <div class="right-items" style="float: right;">

        <el-input style="width:90%;" placeholder="请输入搜索的关键字">

            <el-button type="primary" slot="append" icon="el-icon-search" plain>搜索</el-button>

        </el-input>
      </div>-->

    </el-row>

    <br>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="450">
    <el-table-column
      prop="number"
      label="商品编号"
      width="300">
    </el-table-column>
    <el-table-column
      prop="name"
      label="商品名称"
      width="300">
    </el-table-column>
    <el-table-column
      prop="address"
      label="商品条码"
      width="300">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价"
      width="260">
    </el-table-column>
    <el-table-column
      prop="quantity"
      label="数量（件）"
      width="230">
    </el-table-column>
    <el-table-column
      prop="money"
      label="金额"
      width="230">
    </el-table-column>
      <el-table-column
        prop="quantity"
        label="数量（件）"
        width="230">
      </el-table-column>
      <el-table-column
        prop="money"
        label="金额"
        width="230">
      </el-table-column>
  </el-table>
    <br>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-row >


      <el-col :span="8">
        <el-form-item label="同来:" label-width="10%">
          <el-input v-model="formInline.user" ></el-input>
        </el-form-item>

      </el-col>

      <el-col :span="8">
        <el-form-item label="信息提示:" >
          <el-input v-model="formInline.user" ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="位置:">
          <el-input v-model="formInline.user" ></el-input>
        </el-form-item>

      </el-col>
    </el-row>


    </el-form>

  </el-card>

    </div>
  </div>
</template>
<script>
export default {
  methods: {
    goBack() {
      console.log('go back');
    },
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加基本信息";
    },
  },
  name: "Baseinfo",
  dicts: ['yinhe_demo'],
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      checkList: ['选中且禁用','复选框 A'],
      input: '',
      textarea: '',
      tableData: [{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      }, {
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      }, {
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      }, {
        number: '1234561',
        name: '凉茶 300ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      }, {
          number: '1234561',
          name: '矿泉水 550ml',
          address:'12421432143214321',
          price:'2.00',
          quantity:'1',
          money:'2.00',
        },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },{
        number: '1234561',
        name: '矿泉水 550ml',
        address:'12421432143214321',
        price:'2.00',
        quantity:'1',
        money:'2.00',
      },
        {
          number: '1234561',
          name: '矿泉水 550ml',
          address:'12421432143214321',
          price:'2.00',
          quantity:'1',
          money:'2.00',
        }],

      form: {
        name: '',
      },
      rules: {
      },
      formInline: {
        user: '',
        region: ''
      }
    }
  }
}

</script>



<style lang="scss" scoped>

img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

</style>

